<template>
	<view class="body">
		<view class="top">
			<view class="top-item" v-if="takePeople.name">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-icon">
							<image src="/static/images/take.png" mode="widthFix"></image>
						</view>
						<view class="item-name">
							<text>{{collectPeople.name}} {{collectPeople.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="item-center">
					<view class="center-detail">
						<view class="center-address">
							<text>{{takePeople.province}} {{takePeople.city}} {{takePeople.district}} {{takePeople.address}}</text>
						</view>
						<!-- <view class="center-info" @click.stop="goPage('/pages/receive/goods')">
							<view class="info-left">
								<text>货物信息</text>
							</view>
							<view class="info-right">
								<view class="right-text">
									<text>日用品/2个/1件/某某类型</text>
								</view>
								<view class="right-image">
									<image src="/static/images/right1.png" mode="widthFix"></image>
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="top-item" style="padding-top: 14rpx;" v-if="collectPeople.name">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-icon">
							<image src="/static/images/collect.png" mode="widthFix"></image>
						</view>
						<view class="item-name">
							<text>{{collectPeople.name}} {{collectPeople.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="item-center">
					<view class="center-detail">
						<view class="center-address">
							<text>{{collectPeople.province}} {{collectPeople.city}} {{collectPeople.district}} {{collectPeople.address}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="choice goods-info" v-if="goodsInfo.good_quantity">
			<view class="info-left">
				<text>货物信息</text>
			</view>
			<view class="info-right">
				<view class="right-text">
					<text>{{goodsInfo.good_quantity}}/{{goodsInfo.good_number}}个/{{goodsInfo.good_size}}件/{{goodsInfo.good_type}}</text>
				</view>
				<view class="right-image">
					<image src="/static/images/right1.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<block v-if="type == 'express'">
			<view class="choice">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>仓库选择</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.warehouse ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.warehouse || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="choice-item">
					<view class="choice-item-left">
						<text>运输方式</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.transType ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.transType || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="choice-item">
					<view class="choice-item-left">
						<text>渠道选择</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.channel_name ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.channel_name || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="choice">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>进口报关</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.declaration ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.declaration || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="choice-item">
					<view class="choice-item-left">
						<text>代收款项</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.acting_mat_fee ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.acting_mat_fee || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			
				<view class="list-item">
					<view class="list-item-left">
						<text>附加服务</text>
					</view>
					<view class="list-item-right">
						<view class="right-centent">
							<view class="right-text" :style="formData.extra_fee ? 'color: #333;font-weight: bold;' : ''">
								<text>{{formData.extra_fee || '无'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="choice-item">
					<view class="choice-item-left">
						<text>支付方式</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.play ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.play || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>

		</block>		
		<block v-if="type == 'appointment'">
			<view class="choice">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>仓库选择</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="formData.warehouse ? 'color: #333;font-weight: bold;' : ''">
							<text>{{formData.warehouse || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</block>

		<view class="freight choice">
			<view class="specs-detail" @click="handleJump">点击查看运费计算明细</view>
			<view class="specs" style="margin:0">
				<view class="specs-item">
					<view class="specs-title">运费</view>
				</view>
				<view class="specs-item">
					<view class="specs-value">{{ info.detail_fees.dispatch_fee || 0}}</view>
				</view>
				<view class="specs-item">
					<view class="specs-title">其他费</view>
				</view>
				<view class="specs-item">
					<view class="specs-value">{{ info.detail_fees.extra_fee_money || 0}}</view>
				</view>
				<view class="specs-item">
					<view class="specs-title">代垫费</view>
				</view>
				<view class="specs-item">
					<view class="specs-value">{{ info.detail_fees.commission_collection || 0}}</view>
				</view>
				<view class="specs-item">
					<view class="specs-title">人民币总合计</view>
				</view>
				<view class="specs-item">
					<view class="specs-value">{{ info.detail_fees.total_fee || 0}}</view>
				</view>
				<view class="specs-item">
					<view class="specs-title red" style="color: #E82E2E;">
						<text v-if="info.detail_fees">{{info.detail_fees.CurrencynameHl}}</text>
						总合计</view>
				</view>
				<view class="specs-item">
					<view class="specs-value red">{{ info.detail_fees.total_fee_tai || 0}}</view>
				</view>
			</view>
		</view>
		<view class="footer-block" v-if="type == 'express'">
			<view class="footer">
				<view class="price-block">
					<view class="price-content">
						<view class="price-info"></view>
						<view class="back-btn" @click="pageBack">返回</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {expressOrderDetail2, appointmentOrderDetail, getOrderAdditionalChargesList} from '@/api/order.js';
	export default {
		data() {
			return {
				id: 0,
				type: '',
				info: {},
				collectPeople: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					address: ''
				},
				takePeople: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					address: ''
				},
				goodsInfo: {
					good_type: '',
					good_size: '',
					good_number: '',
					good_quantity: ''
				},
				additionalList: [],
				formData: {
					warehouse: '',
					transType: '',
					channel_name: '',
					declaration: '',
					acting_mat_fee: '',
					extra_fee: '',
					play: '',
					
					"weight": 0.55, //重量
					"weight_sum": 0, //体积重
					"volume_ceil": 0, //材积重
					"compute_pirce": 0, //单价
					"send_fee": 0, //派件费
					"dispatch_fee": 0, //运费
					"commission_collection": 0, //代垫费
					"other_fee": 0, //其他费用
					"total_fee": 0, //总费用（人民币）
					"total_fee_tai": 0 ,//总费用（台币）
				},
				tipsShow: true
			}
		},
		async onLoad(options) {
			if (options.title) {
				uni.setNavigationBarTitle({
					title: decodeURIComponent(options.title)
				});
			}
			this.id = options.id;
			this.type = options.type;
			await this.loadData();
		},
		methods: {
			handleJump(){
				uni.navigateTo({
					url:`/pages/order/urgenDetail?logistics_id=${this.id || ''}&type=${this.type||''}`
				})
			},

			pageBack() {
				uni.navigateBack();
			},
			async loadOrderDetail() {
				try{
					let res;
					if (this.type == 'express') {
						res = await expressOrderDetail2(this.id);
						this.info = res.data;
						
						let collectionDetail = this.info.pick_address.split(' ');
						this.collectPeople = {
							name: this.info.pick_name,
							mobile: this.info.pick_phone,
							province: collectionDetail[0] || '',
							city: collectionDetail[1] || '',
							district: collectionDetail[2] || '',
							address: collectionDetail[3] || ''
						};
						
						this.takePeople = {
							name: this.info.take_name,
							mobile: this.info.take_phone,
							province: this.info.province,
							city: this.info.city,
							district: this.info.district,
							address: this.info.take_address
						};
						
						this.goodsInfo = {
							good_type: this.info.good_type,
							good_size: this.info.good_size,
							good_number: this.info.good_number,
							good_quantity: this.info.good_quantity.toString()
						};
						
						this.formData.warehouse = this.info.warehouse;
						this.formData.transType = this.info.type == 1 ? '空运' : '海运';
						this.formData.channel_name = this.info.channel_name;
						if (this.info.declaration == '2') {
							this.formData.declaration = '包税';
						} else if (this.info.declaration == 1 || this.info.declaration == '1-1') {
							this.formData.declaration = '不包税';
						} else if (this.info.declaration == '1-4') {
							this.formData.declaration = '简易报关';
						} else {
							this.formData.declaration = '正式报关';
						}
						this.formData.acting_mat_fee = this.info.acting_mat_fee;
						if (this.info.extra_fee) {
							let extraFee = this.info.extra_fee.split(','),
								extraFeeTitle = this.additionalList.map(item => {
									return extraFee.includes(String(item.id)) ? `${item.name} ￥${item.price}` : false;
								}).filter(item => !!item);
							this.formData.extra_fee = extraFeeTitle.join(',');
						}
						this.formData.play = this.info.play;
						
						this.formData.weight = this.info.detail_fees.weight;
						this.formData.weight_sum = this.info.detail_fees.weight_sum;
						this.formData.volume_ceil = this.info.detail_fees.volume_ceil;
						this.formData.compute_pirce = this.info.detail_fees.compute_pirce;
						this.formData.send_fee = this.info.detail_fees.send_fee;
						this.formData.dispatch_fee = this.info.detail_fees.dispatch_fee;
						this.formData.commission_collection = this.info.detail_fees.commission_collection;
						this.formData.other_fee = this.info.detail_fees.other_fee;
						this.formData.total_fee = this.info.detail_fees.total_fee;
						this.formData.total_fee_tai = this.info.detail_fees.total_fee_tai;
					} else {
						res = await appointmentOrderDetail(this.id);
						this.info = res.data;
						
						this.formData.warehouse = this.info.warehouse;
						this.takePeople = {
							name: this.info.order_lift_address.name,
							mobile: this.info.order_lift_address.phone,
							province: this.info.order_lift_address.province,
							city: this.info.order_lift_address.city,
							district: this.info.order_lift_address.district,
							address: this.info.order_lift_address.lift_address
						};
						
						let collectionDetail = this.info.pick_address.split(' ');
						this.collectPeople = {
							name: this.info.pick_name,
							mobile: this.info.pick_phone,
							province: collectionDetail[0] || '',
							city: collectionDetail[1] || '',
							district: collectionDetail[2] || '',
							address: collectionDetail[3] || ''
						};
						
						this.goodsInfo = {
							good_type: this.info.order_lift_address.good_type,
							good_size: this.info.order_lift_address.good_size,
							good_number: this.info.order_lift_address.good_number,
							good_quantity: this.info.order_lift_address.good_quantity.toString()
						};
					}
				}catch(e){
					console.log(e);
				}
			},
			async loadAdditionalList() {
				try{
					let res = await getOrderAdditionalChargesList();
					this.additionalList = res.data;
				}catch(e){
					console.log(e);
				}
			},
			async loadData() {
				await this.loadAdditionalList();
				await this.loadOrderDetail();
			},
			closeTips() {
				this.tipsShow = false;
			},
			goPage(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.body {
		padding: 30rpx;
		box-sizing: border-box;

		.top {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding-top: 30rpx;

			.top-item {

				.item-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 30rpx;
					box-sizing: border-box;

					.item-top-left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.item-icon {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.item-name {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							padding-left: 14rpx;
						}
					}

					.item-top-right {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 144rpx;
						height: 52rpx;
						border-radius: 28rpx;
						border: 2rpx solid #E9E9E9;

						.right-icon {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
							}
						}

						.right-title {
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}

				.item-center {
					width: 100%;
					padding-left: 24rpx;
					padding-top: 12rpx;
					box-sizing: border-box;

					.center-detail {
						padding: 0 30rpx 32rpx 36rpx;
						box-sizing: border-box;
						border-left: 4rpx dashed #F0F0F0;

						.center-address {
							font-size: 26rpx;
							color: #666;
							font-weight: 500;
							line-height: 40rpx;
						}

						.center-info {
							margin-top: 14rpx;
							background: #F5F5F5;
							border-radius: 12rpx;
							padding: 24rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.info-left {
								font-size: 26rpx;
								color: #666;
								font-weight: 500;
							}

							.info-right {
								display: flex;
								justify-content: flex-end;
								align-items: center;

								.right-text {
									font-size: 26rpx;
									color: #333;
									font-weight: bold;
									padding-right: 8rpx;
								}

								.right-image {
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 12rpx;
										height: 20rpx;
									}
								}
							}
						}

						.center-hr {
							width: 100%;
							height: 2rpx;
							background-color: #F5F5F5;
							margin-top: 32rpx;
						}
					}
				}
			}
			
			.top-item:last-of-type .center-detail {
				border: none;
			}

		}

		.choice {
			margin-top: 20rpx;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.list-item{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:last-child{
					border: none;
				}
				.list-item-left{
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
				
				.list-item-right{
					flex: 1;
					padding-left: 30rpx;
					box-sizing: border-box;
					overflow: hidden;
					
					.input{
						text-align: right;
						color: #333;
						font-size: 28rpx;
						font-weight: 500;
					}
					.right-centent{
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						overflow: hidden;
						
						.right-text{
							font-size: 28rpx;
							color: #999;
							font-weight: 500;
							padding-right: 14rpx;
							flex: 1;
							overflow: hidden;
							box-sizing: border-box;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: right;
						}
						
						.right-icon{
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 12rpx;
								height: 20rpx;
							}
						}
					}
				}
			}

			.choice-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;

				&:last-child {
					border: none;
				}

				.choice-item-left {
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}

				.choice-item-right {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.right-title {
						font-size: 28rpx;
						color: #999;
						font-weight: 500;
						padding-right: 14rpx;
					}

					.right-icon {
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 12rpx;
							height: 20rpx;
						}
					}
				}
			}
			
			.list-item{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:last-child{
					border: none;
				}
				.list-item-left{
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
				
				.list-item-right{
					flex: 1;
					padding-left: 30rpx;
					box-sizing: border-box;
					overflow: hidden;
					
					.input{
						text-align: right;
						color: #333;
						font-size: 28rpx;
						font-weight: 500;
					}
					.right-centent{
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						overflow: hidden;
						
						.right-text{
							font-size: 28rpx;
							color: #999;
							font-weight: 500;
							padding-right: 14rpx;
							flex: 1;
							overflow: hidden;
							box-sizing: border-box;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: right;
						}
						
						.right-icon{
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 12rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}
		
		.goods-info {
			margin-top: 14rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
		
			.info-left {
				font-size: 26rpx;
				color: #666;
				font-weight: 500;
			}
		
			.info-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
		
				.right-text {
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
					padding-right: 8rpx;
				}
		
				.right-image {
					display: flex;
					justify-content: center;
					align-items: center;
		
					image {
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}

		.freight{
			padding: 30rpx 30rpx 30rpx 30rpx;
			.specs-detail{
				height: 72rpx;
				font-size: 28rpx;
				line-height: 72rpx;
				color: #666;
				font-weight: 500;
				border: 2rpx solid #E6E6E6;
				border-radius: 14rpx;
				text-align: center;
			}
		}
	
		.specs {
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 16rpx;
			margin-bottom: 50rpx;
			
			.specs-item {
				height: 80rpx;
				border-radius: 14rpx;
				border: 2rpx solid #E6E6E6;
				box-sizing: border-box;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.specs-title,
				.specs-value {
					flex: 1;
					text-align: left;
					font-size: 28rpx;
				}
				
				.specs-title {
					font-weight: 500;
					color: #666;
				}
				
				.specs-value {
					font-weight: bold;
					color: #333;
				}
			}
		}
	}	
	
	.footer-block {
		width: 100%;
		height: 228rpx;
		
		.footer {
			width: inherit;
			height: inherit;
			position: fixed;
			z-index: 9;
			bottom: 0;
			left: 0;
			border-radius: 20rpx 20rpx 0 0;
			box-sizing: border-box;
			display: flex;
			align-items: stretch;
			justify-content: flex-end;
			flex-direction: column;
			
			.tips {
				border-radius: 20rpx 20rpx 0 0;
				height: 108rpx;
				width: 100%;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				overflow: hidden;
				background-color: #f5f5f5;
				z-index: 11;
				position: absolute;
				left: 0;
				bottom: 100%;
				transform: translateY(100%);
				
				.tips-content {
					height: 100%;
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;
					color: #999;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.img {
						width: 25rpx;
						height: 25rpx;
						position: absolute;
						z-index: inherit;
						right: 30rpx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
			
			.price-block {
				background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				width: 100%;
				box-shadow: 0 -4rpx 18rpx 0 rgba(0,0,0,0.05);
				height: 166rpx;
				position: relative;
				z-index: 12;
				padding-bottom: 68rpx;
				box-sizing: border-box;
				overflow: hidden;
				
				.price-content {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.price-info {
						flex: 1;
						padding-right: 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.price-item {
							padding-right: 25rpx;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							
							.title {
								color: #5F6166;
								font-size: 24rpx;
								font-weight: 500;
							}
							
							.price {				
								.icon {
									color: #E6201A;
									font-size: 24rpx;
									font-weight: bold;
									line-height: 30rpx;
								}
								
								.txt {
									color: #E6201A;
									font-size: 32rpx;
									font-weight: bold;
									line-height: 40rpx;
								}
							}
						}
						
						.price-item:last-child {
							padding-right: 0;
						}
					}
					
					.back-btn {
						width: 200rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #E82E2E;
						color: #fff;
						border-radius: 16rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

</style>
